<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>d3 demo</title>
<style>
body{
margin:0;
padding:0;
overflow:hidden;
}
.menu-list{
	position:absolute;
	left:0;
	top:0;
	display:none;
	list-style:none;
	border:1px solid #dcdddd;
	padding:2px;
	background-color:#FFF;
}
.menu-list li{
	border-bottom:1px solid #ccc;
	padding:5px 10px;
	cursor:pointer;
}
.menu-list li:last-child{
	border-bottom:none;
}
.menu-list li:hover{
	color:#409eff;
	background-color:#ccc;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="force.js"></script>
<script src="childForce.js"></script>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

var datas = {
	nodes:[
		{id:1,r:30,pic:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2690587153,2643787055&fm=26&gp=0.jpg"},
		{id:2,r:30,pic:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2860640912,1833965317&fm=26&gp=0.jpg"},
		{id:3,r:30,pic:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=297690209,1035022668&fm=26&gp=0.jpg"}
	],
	links:[{source:1,target:2},{source:1,target:3},],
};

var getDataList = {
	1:{
		nodes:[
			{id:1,r:30,pic:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2690587153,2643787055&fm=26&gp=0.jpg"},
			{id:4,r:30,pic:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2690587153,2643787055&fm=26&gp=0.jpg"},
			{id:5,r:30,pic:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2860640912,1833965317&fm=26&gp=0.jpg"},
		],
		links:[
			{source:1,target:4},
			{source:1,target:5},
		],
	},
};

var menu = ["百科","图谱","下钻"];

var menuList  = '<li id="wiki">百科</li><li id="atlas">图谱</li><li id="drilldown">下钻</li>';

var svg = d3.select("body")
	.append("svg");
	
var defs = svg.append("defs");

var menus = d3.select("body").append("ul")
	.attr("class","menu-list")
	.attr("id","menuList")
	.html(menuList);

var $menuList = document.getElementById("menuList");
$menuList.addEventListener("click",menuListFn);

function menuListFn(e){
	const id = e.target.id;
	const parentId = e.target.parentNode.getAttribute("parentid")
	if(id === "wiki"){//百科
		console.log("百科")
	}else if(id === "atlas"){//图谱
		console.log("图谱")
	}else if(id === "drilldown"){//下钻
		const obj = getDataList[parentId];
		const childForce = new ChildForceLayout(
			{
				nodes:obj.nodes,
				links:obj.links,
				defs,
				menus,
				holderDom:svg.selectAll("g.holders"),
			}
		);
		childForce.init();
	}
}

const force = new ForceLayout(
	{
		nodes:datas.nodes,
		links:datas.links,
		width,
		height,
		svg,
		defs,
		menus,
	}
);

force.init();

	
</script>
</body>
</html>